<template #default="{ row }">
    <el-table :data="tableData" style="width: 100%" stripe border>
        <el-table-column align="center" type="index" label="序号" width="120" />
        <el-table-column align="center" prop="roleName" label="角色名称" width="200" />
        <el-table-column align="center" label="角色权限" width="300">
            <template #default="{row}">
                <el-tag v-for="item in row.permission">
                    {{ routesMap[item] }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column align="center" label="开启/关闭" width="200">
            <template #default="{ row }">
                <el-switch prop="open" v-model="row.open"></el-switch>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="createdAt" label="添加时间" width="200">
            <template #default="{ row }">
                <div>
                    {{ row.updatedAt.slice(0, 10) }}
                </div>
            </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
            <template #default="{row}">
                <el-button  type="primary" size="small" @click="handleClick">编辑</el-button>
                <el-button  type="danger" @click="handleDelete(row.objectId)" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { roleGet,roleDelete } from "../../../api/role"
import { RoutesObj } from "../../../utils/tools";
import {  ElMessage } from 'element-plus'

const handleClick = () => {
    console.log("click");
};
let routesMap=RoutesObj()

const handleDelete=(objectId:string)=>{
    roleDelete(objectId)
    ElMessage({
                    showClose: true,
                    message: '删除成功',
                    type: 'success',
                })
}
const tableData = ref([]);
roleGet().then((res) => {
    tableData.value = res.data.results
})

</script>
